<template>
  <div class="container">
    <Card shadow>
      <div class="title mb-30">
        <Divider>
          <h3 style="color: #17233d;">第一周日期</h3>
        </Divider>
      </div>
      <div class="first-week-date-container">
        <first-week-date @triggerSpin="loading = $event"></first-week-date>
      </div>
    </Card>
    <Spin v-if="loading" fix>
      <Icon type="ios-loading" size=18 class="spin-icon-load"></Icon>
      <div class="mt-5">加载中</div>
    </Spin>
  </div>
</template>

<script>
import { on, off } from '@/libs/tools'
import FirstWeekDate from '_c/first-week-date'
export default {
  name: 'first_week_date',
  components: {
    'first-week-date': FirstWeekDate
  },
  data () {
    return {
      firstEnter: false,
      loading: false
    }
  },
  methods: {
    resizeSubComponents () {
      this.$children[0].$el.children[0].style.minHeight = this.$parent.$parent.$el.clientHeight - 36 + 'px'
      document.querySelector('.ivu-scroll-container').style.height = this.$parent.$parent.$el.clientHeight - 168 + 'px'
    }
  },
  created () {
    this.firstEnter = true
  },
  mounted () {
    this.$nextTick(() => {
      // document.querySelector('.content-wrapper.ivu-layout-content').style.overflowY = 'scroll'
      this.resizeSubComponents()
      on(window, 'resize', this.resizeSubComponents)
    })
  },
  activated () {
    if (!this.firstEnter) {
      this.resizeSubComponents()
      on(window, 'resize', this.resizeSubComponents)
    }
  },
  deactivated () {
    // document.querySelector('.content-wrapper.ivu-layout-content').style.overflowY = 'auto'
    off(window, 'resize', this.resizeSubComponents)
  },
  beforeDestroy () {
    // document.querySelector('.content-wrapper.ivu-layout-content').style.overflowY = 'auto'
    off(window, 'resize', this.resizeSubComponents)
  }
}
</script>

<style lang="less" scoped>
  @import "first-week-date.less";
</style>
<style lang="less">
  .first-week-date-container {
    #first-week-date {
      .ivu-timeline {
        padding-left: 35%;
      }
    }
  }
</style>
